<template>
	<view class="case_box">
		<view class="card">
			<view class="title_box2 wp dpflxr">
			   <view class="title dpflxr">
				   <view class="icon">
						<image src="../../static/images/icon_yytj.png"></image>
				   </view>
					<text>营业统计</text>
			   </view>  
		    </view>
			<view class="dataChart pos_rel">
			<!-- 	<image src="../../static/images/img_dataChart.png" mode="aspectFill"></image> -->
				<qiun-data-charts type="column" :chartData="chartData"></qiun-data-charts>
				<button class="switch pos_abs" type="default" @click="screenCharts(0)">日</button>
				<button class="switch mon pos_abs" type="default"  @click="screenCharts(1)">月</button>
			</view>
		</view>
	   
		<view class="card">
			<view class="title_box2 wp dpflxrjb">
			   <view class="title dpflxr">
				   <view class="icon">
						<image src="../../static/images/icon_zyye.png"></image>
				   </view>
					<text>总营业额</text>
					<text class="amount">{{tol_price}}</text>
			   </view>  
			   <view class="filter dpflxr" v-on:tap="click">
				   <text>筛选</text>
				   <view class="icon">
						<image src="../../static/images/icon_sx.png"></image>
				   </view>
			   </view>
			</view>
			<!-- 2.table -->
			<view class="table">
				<view class="tTitle dpflxr">
					<text class="header ">金额</text>
					<text class="header">用户姓名</text>
					<text class="header">手机号码</text>
					<text class="header">交易时间</text>
				</view>
				<view class="tContent dpflxr" v-for="(item,index) in dataList" :key="item.id" @click="goDetai(item.id)">
					<text class="content">{{item.originAmount}}</text>
					<text class="content">{{item.customer.userName}}</text>
					<text class="content">{{item.customer.mobile}}</text>
					<view class="content dpflxc">
						<text>{{item.createdAt}}</text>
						<text>{{item.originAmount}}</text>
					</view>
				</view>
			
			</view>
				
		</view>
	   
		<!-- shadowLayer -->
		<view class="shadowLayer" v-on:tap="hideModel" v-show="showModalStatus"></view>
		<!-- popupWindow  -->
		<transition name="animationData">
			<view :animation="{animationData}" class="popupWindow" v-show="showModalStatus">
				<view class="dpflxrjb title_box wp">
					<text class="title">筛选</text>
					<text class="close" v-on:tap ="hideModel">关闭</text>
				</view>
				<view class="title_box2 wp">
					<text class="title">时间段</text>
				</view>
				<view class="dpflxrjb wp">
					<picker class="short picker pos_rel" mode="date" :value="date_s" start="2015-09-01" end="2080-09-01" @change="bindDateChange">
						<view>{{date_s}}</view>
						<!-- <view class="downArrow pos_abs"></view> -->
					</picker>
					<text>-</text>
					<picker class="short picker pos_rel" mode="date" :value="date_e" start="2015-09-01" end="2080-09-01" @change="bindDateChange02">
						<view>{{date_e}}</view>
					<!-- 	<view class="downArrow pos_abs"></view> -->
					</picker>
				</view>
				<view class="title_box2 wp">
					<text class="title">手机号</text>
				</view>
				
			
				<input type="text" class="inputBox1 w" @input="onKeyInput" placeholder="输入用户手机号查询"></input>
				<view>
					<button class="btn_box5" type="default" @click ="doSearch">确认</button>
				</view>
			</view>
		</transition>
		

	      
	</view>
</template>


<script>
	import request from "@/api/index.js";
	function getDate(type) {
		const date = new Date();
	 
		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		let day = date.getDate();
	 
		if (type === 'start') {
			year = year - 10;
		} else if (type === 'end') {
			year = year + 10;
		}
		month = month > 9 ? month : '0' + month;
		day = day > 9 ? day : '0' + day;
	 
		return `${year}-${month}-${day}`;
	}
	function getDate02() {
		const date = new Date();
	 
		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		let day = date.getDate();
	 
		return `${year}-${month}-${"01"}`;
	}
	export default {
		data() {
			return {
				dataList:[],
				registerDate:['请选择','2021-08-19','2080-08-20'],
				showModalStatus:false,
				animationData:null,
				date_s: getDate02(),
				date_e: getDate({
					format: true
				}),
				chartData:{
				  categories: [],
				  series: [{
				    name: "日统计",
				    data: []
				  }]
				},
				inputValue:'',
				tol_price:'',
				current:1,
				tempData:[]
			}
			
		},
		onLoad(){
			// uni.clearStorage();
			this.getInfo(this.date_s,this.date_e,this.inputValue,this.current,true);
			this.screenCharts(0);
			this.getTolTurnover();
		},
		onReachBottom(){
			this.current = ++this.current;
			this.getInfo(this.date_s,this.date_e,this.inputValue,this.current,false);
		},
		methods: {
			getInfo(s_time,e_time,tel,current,doRefresh){
				request.http('/shop/store-api/frontOrderform/' + uni.getStorageSync('shop_id') + 
				'/page?current='+current+'&customerMobile='+tel+'&customerName=&ordersStatus=&ordersType=&startDate='+s_time+'&endDate='+e_time, 'GET').then(res => {
					console.log(res);
					if(res.data.code==0){
						if(doRefresh){
							console.log("刷新");
							this.dataList = []; 
							this.dataList  = res.data.data.records;
						}else{
							console.log("加载更多");
							this.tempData = res.data.data.records;
							if(this.tempData.length > 0){
								console.log("加载更多数据大于0");
								this.dataList = this.dataList.concat(this.tempData)
							}else{
								console.log("加载更多没有更多数据");
								uni.showToast({
									title: '暂无更多数据',
									icon: 'none'
								})
							}
						}
					}
				})
				// uni.request({
				// 	url: 'http://viptest.babybear.cn/shop/store-api/frontOrderform/106/page?current=1&customerMobile=&customerName=&ordersStatus=&ordersType=&startDate=&endDate=',
				// 	header: {
				// 	   'Content-Type': 'application/x-www-form-urlencoded' ,
				// 	    'Authorization': 'bearer 53893ff6-e981-40a9-ae3d-4299d1561da2' 
				// 	},
				// 	success: (res) => {
				// 	    console.log(res.data);
				// 	 }
				// })
			},
			bindDateChange(e) {
				this.date_s = e.detail.value;
			},
			bindDateChange02(e) {
				this.date_e = e.detail.value;
			},
			//点击显示底部弹出框函数
			click() {
			  this.showModel();
			},
			//显示对话框函数
			showModel () {
			  var animation = uni.createAnimation({
			    duration: 100,
			    timingFunction: "easein",
			    delay: 0
			  })
			  this.animation = animation
			  animation.translateY(2000).step()
			  this.animationData = animation.export(),
			 
			  setTimeout(function () {
			    animation.translateY(0).step()
				this.animationData =  animation.export();
				 this.showModalStatus = true;
			  }.bind(this), 200)
			},
			//隐藏对话框函数
			hideModel () {
			  var animation = uni.createAnimation({
			    duration: 200,
			    timingFunction: "linear",
			    delay: 0
			  })
			  
			  this.animation = animation
			  animation.translateY(300).step()
			  this.animationData =  animation.export();
			  setTimeout(function () {
			    animation.translateY(0).step()
				this.animationData = animation.export(),
				this.showModalStatus = false;
			  }.bind(this), 200)
			},
			onKeyInput: function(event) {
			    this.inputValue = event.target.value
			},
			doSearch(){
				this.hideModel()
				this.getInfo(this.date_s,this.date_e,this.inputValue,this.current,true)
				this.getTolTurnover()
				this.screenCharts(0)
			},
			goDetai(id){
			     console.log("传的id"+id);
				 uni.navigateTo({
					  url:'../index_transaction_detail/index_transaction_detail?id='+id
				 });

			},
			screenCharts(type){
				if(type==0){
					let date_s = new Date(this.date_s);
					let date_e = new Date(this.date_e);
			
					var data = {
						mobile: this.inputValue,
						startDate:date_s,
						endDate:date_e
					}
					request.http('/shop/store-api/frontOrderform/' + uni.getStorageSync('shop_id') +
					'/getDayTotalAmount/group', 'POST',data).then(res => {
						console.log(res);
						if(res.data.code==0){
							var dateList = [];
							var itemList = [];
							var myList = [];
							var mItem = {
								name:"",
								data:[]
							}
							res.data.data.forEach((item)=>{
								dateList.push(item.date.substring(item.date.length-2,item.date.length));
								itemList.push(item.amount);
							})
							mItem.name = "日统计"
							mItem.data = itemList;
							myList.push(mItem);
							
							this.chartData.categories = dateList;
							this.chartData.series = myList;
						
							console.log(JSON.stringify(this.chartData));
						
						}
					})
				}else {
				
					request.http('/shop/store-api/frontOrderform/' + uni.getStorageSync('shop_id') +
					'/getMonthTotalAmount/group', 'POST').then(res => {
						console.log(res);
						if(res.data.code==0){
						var dateList = [];
						var itemList = [];
						var myList = [];
						var mItem = {
							name:"",
							data:[]
						}
						res.data.data.forEach((item)=>{
							dateList.push(item.date.substring(item.date.length-2,item.date.length));
							itemList.push(item.amount);
						})
						mItem.name = "月统计"
						mItem.data = itemList;
						myList.push(mItem);
						
						this.chartData.categories = dateList;
						this.chartData.series = myList;
												
						console.log(JSON.stringify(this.chartData));
						}
					})
				}
			},
			getTolTurnover(){
				let date_s = new Date(this.date_s);
				let date_e = new Date(this.date_e);
						
							
				var data = {
					mobile: this.inputValue,
					startDate:date_s,
					endDate:date_e
				}
				request.http('/shop/store-api/frontOrderform/' + uni.getStorageSync('shop_id') +
				'/totalTurnover', 'POST',data).then(res => {
					console.log(res);
					if(res.data.code==0){
					  this.tol_price = res.data.data.totalAmount;
					}
				})
			}
		}
		
	}
</script>

<style src="../../static/css/app.css"></style>
<style>
	
	.title_box2 .title .icon{
		width: 32rpx;
		height: 32rpx;
		margin-right: 20rpx;
	}
	.title_box2 .amount{
		margin-left: 20rpx;
		font-size: 28rpx;
		font-weight: bold;
		color: #FF1313;
		line-height: 28rpx;
	}
	.dataChart{
		width: 100%;
		height: 417rpx;
	}
	.filter{
		color: #666;
		font-weight: normal;
		font-size: 24rpx;
	}
	.filter .icon{
		width: 28rpx;
		height: 28rpx;
		margin-left:10rpx ;
	}
	
	/* <!-- 2.table --> */
	.table{
	 
	    width: 100%;
	}
	.table .tTitle{
	    width: 100%;
	    height: 60rpx;
	    background: #F5F5F5;
	    font-size: 20rpx;
	    font-weight: 500;
	    color: #999;
	    line-height: 60rpx;
	}
	.table .tContent{
	    border-bottom: 1rpx #eee solid;
	    font-size: 20rpx;
	    line-height: 30rpx;
	    padding-top: 20rpx;
	    padding-bottom: 20rpx;
		background-color: #fff;
	}
	.table .tContent .content,
	.table .tTitle .header{
	    text-align: center;
	    width: 25%;
	    box-sizing: border-box
	}
	.table .tContent .content:first-of-type{
		color: #FF1313;
	}
	.table .tContent .content.dpflxc{
		color: #333;
	}
	.content .mImg{
	    width: 120rpx;
	    height: 80rpx;
	    border-radius: 6rpx;
	    margin-bottom: 5rpx;
	}
	.popupWindow {
	  height: 575rpx;
	  width: 100%;
	  overflow: hidden;
	  position: fixed;
	  bottom: 0;
	  left:0;
	  
	  background: #fff;
	  border-radius: 20rpx 20rpx 0 0;
	  box-sizing: border-box;
	}
	.popupWindow .title_box{
		height: 80rpx;
		line-height: 80rpx;
		border-bottom: 1rpx #eee solid;
	}
	.popupWindow .title_box .close{
		width: 58rpx;
		height: 24rpx;
		color: #999999;
		line-height: 24rpx;
		border-radius: 0rpx;
	}
	.popupWindow  .title_box2{
		font-size: 28rpx;
		line-height: 28rpx;
		padding-bottom: 20rpx;
	}
	.picker{
		height: 60rpx;
		background: #F5F5F5;
		border-radius: 12rpx;
		color: #999;
		box-sizing: border-box;
		padding: 0 60rpx 0 20rpx;
		line-height: 60rpx;
	}
	.picker.short{
		width: calc((100% - 30rpx) / 2);
		
	}
	.picker .downArrow{
		right: 20rpx;
		margin-top: 0rpx;
		top: 20rpx;
	}
	.inputBox1{
		height: 60rpx;
		background: #F5F5F5;
		border-radius: 12rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: #999999;
		line-height: 60rpx;
		box-sizing: border-box;
		padding: 0 20rpx;
	}
	.switch{
		font-size: 32rpx;
		font-weight: 500;
		color: #356BF4;
		line-height: 32rpx;
		left: 30rpx;
		bottom: 28rpx;
		background-color: transparent;
		font-weight: bold;
		text-shadow: 0 0 4rpx 8rpx #5a84f0;
	}
	.switch.mon{
		left: auto;
		right: 30rpx;
	}
</style>
